<template>
  <t-dialog v-model:visible="visible" :cancelBtn=null :confirmBtn="null">
    <t-form ref="dialogForm" :data="formData" :rules="rules" @reset="onReset" @submit="submit">
      <t-form-item label="护理等级名称" name="name">
        <t-input v-model="formData.name"></t-input>
      </t-form-item>

      <t-form-item label="执行护理计划" name="planName">
        <t-select v-model="formData.planId" class="demo-select-base" clearable filterable>
          <t-option v-for="(item) in planList" :key="item.planId" :value="item.value" :label="item.label">
            {{ item.label }}
          </t-option>
        </t-select>
      </t-form-item>

      <t-form-item label="护理费用" name="fee">
        <t-input-number v-model="formData.fee"/>
      </t-form-item>

      <t-form-item label="状态" name="status">
        <t-radio-group v-model="formData.status">
          <t-radio :value=0>禁用</t-radio>
          <t-radio :value=1>启用</t-radio>
        </t-radio-group>
      </t-form-item>

      <t-form-item label="个人简介" name="description">
        <t-textarea v-model="formData.description" placeholder="简单描述自己的经历" clearable/>
      </t-form-item>

      <t-form-item>
        <t-space size="small">
          <t-button theme="primary" type="submit">提交</t-button>
          <t-button theme="default" variant="base" type="reset">重置</t-button>
          <t-button theme="default" variant="base" @click="handleClear">清空校验结果</t-button>
        </t-space>
      </t-form-item>
    </t-form>
  </t-dialog>


</template>
<script lang="ts" setup>
import {ref, computed, watch} from 'vue';
import {
  MessagePlugin,
  FormInstanceFunctions,
  FormProps,
  CheckboxGroupProps,
  AutoCompleteProps,
  ButtonProps,
} from 'tdesign-vue-next';
// 隐藏显示
const visible = ref(false)
const dialogForm = ref(null)
const formData = ref({
  name: '',
  planId: 0,
  planName: '',
  fee: 1,
  status: 1,
  description: ''
})

// 表单提交, 通知父组件新增数据
const submit = ({validateResult}) => {
  if (validateResult) {

    emits('onFormSubmitEmit', formData.value)
  }
}

const props = defineProps({
  visible: Boolean,
  data: Object,
  // title: String,
  planList: Array
})

// 监听表单数据变化
watch(
  () => props.data,
  () => {
    formData.value = props.data
    if (visible.value) {
      dialogForm.value.clearValidate()
    }
  },
  {deep: true}
)

const emits = defineEmits(['onFormSubmitEmit'])

// 监听父组件传递的数据变化
watch(
  () => props.visible,
  () => {
    visible.value = props.visible
    if (visible.value) {
      dialogForm.value.clearValidate()
    }
  }
)

watch(
  () => props.data,
  () => {
    visible.value = props.visible

  }
)

const form = ref<FormInstanceFunctions>(null);
const rules: FormProps['rules'] = {
  name: [
    {
      required: true,
      message: '姓名必填',
      type: 'error',
      trigger: 'blur',
    },
    {
      required: true,
      message: '姓名必填',
      type: 'error',
      trigger: 'change',
    },
    {
      min: 0,
      message: '输入字数应在0到10之间',
      type: 'error',
      trigger: 'blur',
    },
    {
      max: 10,
      message: '输入字数应在0到10之间',
      type: 'error',
      trigger: 'blur',
    },
  ],
  planId: [
    {
      required: true,
      message: '护理计划必填',
      type: 'error',
    },
  ],
  fee: [
    {
      required: true,
      message: '费用必填',
      type: 'error',
    },
    {
      number: true,
      message: '请输入数字',
      type: 'warning',
    },
  ],
  status: [
    {
      required: true,
      message: '状态必填',
      type: 'warning',
    },
  ]
};

const options = [];
const onReset: FormProps['onReset'] = () => {
  MessagePlugin.success('重置成功');
};

const handleClear: ButtonProps['onClick'] = () => {
  form.value.clearValidate();
};
</script>
<style scoped>
.demo-select-base {
  width: 300px;
}
</style>
